<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head th:replace="public/temp :: CSS(~{::title},~{::style})">
  <title>神的内容</title>
  <style>
    .userList {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .tableTitle {
      width: 100%;
      font-size: 32px;
      padding: 1%;
      text-align: center;
    }

    .table {
      width: 95%;
      height: 75vh;
      border: 1px solid #f3f3f3;
      overflow: hidden;
      overflow-y: scroll;
      margin: 0 auto;
      padding: 2px;

    }

    table {
      width: 100%;
    }

    .table thead th {
      font-weight: bold;
      font-family: Microsoft YaHei;
      border-bottom: 3px solid #f3f3f3;
    }

    .table tbody td {
      font-size: 12px;
      padding: 3% 1%;
      border-bottom: 1px solid #f3f3f3;
      font-weight: lighter;
      font-family: Microsoft YaHei;
      text-align: center;
    }

    .flex {
      display: flex;
      justify-content: space-between;
    }

    .btn {
      padding: 5px 10px;
      border-radius: 5px;
    }

    .qr {
      color: aqua;
      border: 1px solid aqua;
    }

    .qr:hover {
      background-color: aqua;
      color: black;
      cursor: pointer;
    }

    .xx {
      border: 1px solid yellow;
      color: yellow;
    }

    .xx:hover {
      background-color: yellow;
      color: black;
      cursor: pointer;
    }

    .sc {
      border: 1px solid red;
      color: red;
    }

    .sc:hover {
      background-color: red;
      color: black;
      cursor: pointer;
    }

    .btnlist {
      display: flex;
      justify-content: center;
      margin-top: 5%;
    }

    .xyy {
      margin-left: 15px;
      border: 1px solid white;
      padding: 0 10px;
      border-radius: 5px;
      color: white;
    }

    .tz {
      border: 1px solid;
      padding: 0 10px;
    }

    .xyy:hover {
      background-color: aliceblue;
      color: black;
      cursor: pointer;
    }

    .inputNum {
      margin-left: 15px;
      width: 100px;
      border: 1px solid;
      background-color: transparent;
    }

    .text {
      margin-top: 1%;
      text-align: center;
    }

    .loginOut {
      width: 100%;
      text-align: center;
      padding: 2%;
      border: 1px solid salmon;
      margin-top: 5%;
      color: salmon;
    }

    .loginOut:hover {
      background-color: salmon;
      color: black;
      cursor: pointer;
    }
  </style>
</head>

<body>
<!--JQuery-->
<script src="/assets/js/jquery-3.6.0.min.js"></script>
  <!-- 主要 -->
  <div class="userList">
    <div class="tableTitle">
      田径俱乐部新增会员名单
    </div>
    <!-- 手机版本 -->
    <div class="table">
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>报名时间</th>
            <th>控制台</th>
          </tr>
        </thead>
        <tbody>
          <tr th:each="register:${registers}">
            <td th:text="${register.getName()}"></td>
            <td th:text="${register.getSex()}==1?'男':'女'"></td>
            <td th:text="${#dates.format(register.getDate(), 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td>
              <div class="flex">
                <div class="btn qr" th:if="${register.getConfirm()} ne 1" th:onclick="'confirmReg('+${register.getId()}+')'">确认</div>
                <div class="btn xx" th:onclick="'openDetail('+${register.getId()}+')'">详细信息</div>
                <div class="btn sc" th:onclick="'deleteReg('+${register.getId()}+')'">删除</div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="btnlist">
      <a class="xyy" th:href="'/hfuuTaf/Viva?pageNow='+(${pageNow}-1)">上一页</a>
      <a class="xyy" th:href="'/hfuuTaf/Viva?pageNow='+(${pageNow}+1)">下一页</a>
      <input type="number" class="inputNum">
      <div class="tz" onclick="skipNow()">跳转</div>
    </div>
    <div class="text">
      当前是[[${pageNow}]]页,总共[[${pageAll}]]页,总共有[[${countAll}]]人
    </div>
    <div class="loginOut" onclick="onExit()">
      退出
    </div>
  </div>
<script>
  function openDetail(id) {
    $().openDetail(id);
  }
  function confirmReg(id) {
    if(confirm("是否确认?")){
      $().confirmReg(id);
    }
  }
  function deleteReg(id){
    if(confirm("是否删除该学生?")){
      $().deleteReg(id);
    }
  }
  function skipNow(){
    $().skipNow();
  }
  function  onExit(){
    $().onExit();
  }
  $(function () {
    //打开
    $.fn.openDetail= function (id) {
      window.location.href = "/hfuuTaf/VivaDetail?id="+id;
    }
    //删除
    $.fn.deleteReg= function (id) {
      $.get("/register/get/delete?id="+id,function(res){
        alert(res?"删除成功":"删除失败");
        if(res){
          location.reload()
        }
      });
    }
    //确认
    $.fn.confirmReg= function (id) {
      $.post("/index/post/detail?id="+id,function(res){
        alert(res?"确认成功":"确认失败");
        if(res){
          location.reload()
        }
      });
    }
    //跳转
    $.fn.skipNow=function (){
      let skip = $('.inputNum').val();
      window.location.href="/hfuuTaf/Viva?pageNow="+skip;
    }
    //关闭session
    $.fn.onExit= function () {
      $.post("/post/close");
      window.location.href="/hfuuTaf/login";
    }
  })
</script>
</body>

</html>
